<template>
  <div id="app-box">
    <Collapse v-model="activeName" accordion border>
      <template v-for="grids in menu">
        <CollapseItem :name="grids.title" :title="grids.title">
          <Grid column-num="5">
            <template v-for="gridSingle in grids.children">
              <GridItem :text="gridSingle.title"
                        :key="gridSingle.title"
                        @click="clickGridItem(gridSingle)"
              >
                <img
                  height="64"
                  width="64"
                  :src="baseurl+gridSingle.icon"
                  alt="gridSingle.name"
                  @error="show_default_image"
                >
                {{gridSingle.title}}
              </GridItem>
            </template>
          </Grid>
        </CollapseItem>
      </template>
    </Collapse>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {Col, Collapse, CollapseItem, Grid, GridItem, Row} from 'vant'
  import gql from 'graphql-tag'

  export default {
    name: 'OdooGrid',
    components: {Row, Col, Collapse, CollapseItem, Grid, GridItem},
    data: function () {
      return {
        cols: 4,
        activeName: '',
        headerTitle: '',
        menu: [],
        baseurl: 'https://www.kaikong.cn/'
      }
    }, apollo: {
      menu() {
        return {
          query: gql`{
       menu: getMenu
          }`
        }
      }
    },
    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        isLoading: state => state.vux.isLoading,
        vux: state => state.vux,
        app_root: state => state.app_root
      })
    },
    beforeUpdate: function () {
          this.$emit("ShowTabbar", true)
   // this.NavShowBack = false
      // this.canNew = false
      // this.canEdit = false
      // this.canUnlink = false
      // this.NavShowSetting = true
      // this.model = null
      // this.currentView = 'grid'
    },
    mounted: function () {

    },
    methods: {
      clickGridItem: function (gridSingle) {
        document.title = gridSingle.title
        this.$router.push(gridSingle.path)
      },
      show_default_image: function (event) {
        event.target.src = 'https://www.kaikong.cn/web/image?model=builder.ir.module.module&field=icon_image&id=11&unique='
      }
    }
  }
</script>

<style>

  .overwrite-title-demo {
    margin-top: 5px;
  }
</style>
